<template>
  <div class="dashboard-container">
    <el-button
        size="mini"
        @click="open({})">新增
    </el-button>

    <div v-show="showBox" class="Box">
      <div style="margin:10px 0;">标题:</div> <el-input v-model="BoxData.title" placeholder="请输入内容"></el-input>
      <div style="margin:10px 0;">正文:</div> <el-input v-model="BoxData.content" type="textarea" placeholder="请输入内容"></el-input>
      <el-upload
        class="avatar-uploader"
        drag='true'
        action=""
        :http-request="beforeAvatarUpload"
        :show-file-list="false"
        style="margin:20px 0;"
        >
        <span>上传封面</span> 
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
      </el-upload>
      <el-button
        size="mini"
        type="danger"
        style="float:right;margin-left:20px;"
        @click="close">取消</el-button>
      <el-button
        size="mini"
        style="float:right;"
        @click="add()">保存</el-button>
    </div>

    <div v-show="showBoxUpdate" class="Box">
      <div style="margin:10px 0;">标题:</div> <el-input v-model="BoxData.title" placeholder="请输入内容"></el-input>
      <div style="margin:10px 0;">正文:</div> <el-input v-model="BoxData.content" type="textarea" placeholder="请输入内容"></el-input>
      <el-upload
        class="avatar-uploader"
        drag='true'
        action=""
        :http-request="beforeAvatarUpload"
        :show-file-list="false"
        style="margin:20px 0;"
        >
        <span>上传封面</span> 
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
      </el-upload>
      <el-button
        size="mini"
        type="danger"
        style="float:right;margin-left:20px;"
        @click="close">取消</el-button>
      <el-button
        size="mini"
        style="float:right;"
        @click="update()">更新</el-button>
    </div>
    <el-table
      :data="listData"
      style="width: 100%">
      <el-table-column
        prop="knowledge_id"
        label="知识编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="知识正文"
        >
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column label="封面" width="180">
        <template slot-scope="scope">
          <img :src="'http://localhost:3000/public/image/knowledge_'+scope.row.knowledge_id+'.png?t='+new Date().toString()" width="40" height="40" class="head_pic"/>
        </template>
      </el-table-column>
      <el-table-column 
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="Delete(scope.row.knowledge_id,scope.$index)">删除</el-button>
          <el-button
            v-if="!scope.row.state"
            size="mini"
            @click="openUpdate(scope.row,scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getKnowledge,deleteKnowledge,addKnowledgeImg,createKnowledge,updateKnowledge} from '../../api/static'

export default {
  name: 'Dashboard',
  data(){
    return {
      listData:[],
      showBox:false,
      showBoxUpdate:false,
      BoxData:{},
      imageUrl:'',
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created(){
    getKnowledge().then(res=>{
      console.log(res.data)
      this.listData = res.data
    })
  },
  methods: {
      Delete(knowledge_id,index) {
        deleteKnowledge(knowledge_id).then(res=>{
          this.listData.splice(index,1)
        })
      }, 
      open(data,index){
        this.showBox = true
      },
      openUpdate(data,index){
        this.showBoxUpdate = true
        this.BoxData = data
        this.imageUrl = 'http://localhost:3000/public/image/knowledge_'+data.knowledge_id+'.png?t='+new Date().toString()
      },
      close(){
        this.showBox = false
        this.showBoxUpdate = false
        this.BoxData = {}
          this.imageUrl=''
        
        getKnowledge().then(res=>{
          console.log(res.data)
          this.listData = res.data
        })
      },
      update(){
        updateKnowledge(this.BoxData.content,this.BoxData.title,this.BoxData.knowledge_id).then(res=>{
          this.close()
          this.BoxData = {}
          this.imageUrl=''
        })
      },
      add(){
        console.log(this.BoxData.content,this.BoxData.title,)
        createKnowledge(this.BoxData.content,this.BoxData.title).then(res=>{
          this.close()
          this.BoxData = {}
          this.imageUrl=''
        })
      },
      beforeAvatarUpload(e){
        const file=new FormData();
        let index = this.listData.length?this.listData[this.listData.length-1].knowledge_id+1:0
        if(this.showBoxUpdate){
          index = this.BoxData.knowledge_id
        }
        file.append("index",index)
        file.append("img",e.file)//这个是nodejs接收的文件名img
        addKnowledgeImg(file).then(res => {
          console.log(res)
          this.imageUrl = 'http://localhost:3000/public/image/knowledge_'+index.toString()+'.png?t='+new Date().toString()
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.Box{
  padding: 20px;
  position: fixed;
  z-index: 999;
  width: 500px;
  height: 460px;
  background: rgb(249, 249, 249);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 20px;
  box-shadow:2px 2px 2px 2px rgb(161, 161, 161);
}
.Box img{
  display:block;
  width: 100px;
  height: 100px;
  margin-left: 130px;
}
.Box span{
  display:block;
  width:100%;
  line-height:30px;
  height:30px;
}
</style>
